<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-20 00:35:06
 * @LastEditTime: 2024-06-20 20:05:39
-->
<script lang="ts" setup>
import { useAnime } from "@/hooks/store/index";
const { animeOptions, value, animeConstant, selectChange } = useAnime();
</script>
<template>
  <el-divider content-position="center"
    ><span class="font-size-4">{{$t(`title.animation`)}}</span></el-divider
  >

  <div class="picker padding-left-right-10">
    <div class="between-space-justify padding-top-bottom-8" v-for="item in animeConstant">
      <span
        style="font-size: 15px"
        :class="`animate__animated ` + value[item.value]"
        >{{ $t(item.label) }} </span
      >
      <el-select-v2
        v-model="value[item.value]"
        :options="animeOptions"
        style="width: 120px"
        @change="selectChange(item.value, $event)"
      >
      </el-select-v2>
    </div>
  </div>
</template>
